<template>
  <div class="my-card">
    <div class="card-title no-select">
      <div v-if="!visible" @dblclick="dbTitle">{{ formItem?.displayName }}</div>
      <el-input v-else v-model="formItem.displayName" @blur="visible = false"></el-input>
    </div>
    <div class="card-body">
    </div>
    <div v-if="formItem?.type !== 'Finish'" class="add">
      <el-popover
        :width="300"
        placement="top-start"
        trigger="click"
      >
        <el-button icon="edit" @click="addApprove('Done')">审批</el-button>
        <el-button icon="chat-square" @click="addSend('Done')">抄送</el-button>
        <el-button icon="close" @click="addEnd('Done')">结束</el-button>
        <template #reference>
          <el-icon size="30">
            <CirclePlus />
          </el-icon>
        </template>
      </el-popover>
    </div>
  </div>
  <Tag v-if="formItem?.next" :form-item="formItem.next"></Tag>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Tag from "./Tag.vue";
import { useEventBus } from "@/hooks/event/useEventBus";
import { v4 as uuidv4 } from "uuid";

const bus = useEventBus();
const props = defineProps<{
  formItem: any
}>();
const visible = ref(false);
const dbTitle = () => {
  if (props.formItem.type == "Workflow" || props.formItem.type == "Finish") return;
  visible.value = true;
};

const addApprove = (res: any) => {
  bus.emit("Add", {
    activityId: uuidv4(),
    sourceActivityId: props.formItem.activityId,
    displayName: "审批",
    type: "AuditActivity",
    outcome: res
  });
};
const addSend = (res: string) => {
  bus.emit("Add", {
    activityId: uuidv4(),
    sourceActivityId: props.formItem.activityId,
    displayName: "流程",
    type: "SignalReceived",
    outcome: res
  });
};
const addEnd = (res: string) => {
  bus.emit("Add", {
    activityId: uuidv4(),
    sourceActivityId: props.formItem.activityId,
    displayName: "结束",
    type: "Finish",
    outcome: res
  });
};
const del = () => {
  bus.emit("del", props.formItem.activityId);
};
</script>

<style lang="less" scoped>
.my-card {
  margin: 30px;
  box-shadow: 0px 0px 10px 3px #9f9f9f;
  width: 200px;
  border-radius: 6px;

  .card-title {
    border-radius: 6px 6px 0 0;
    padding: 4px;
    color: aliceblue;
    background-color: green;
  }

  .card-title-approve {
    padding: 4px;
    color: aliceblue;
    background-color: #ff8900;
  }

  .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
  }

  .add {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;

    :after {
      position: absolute;
      content: "";
      width: 1px;
      height: 60px;
      background: #bbbbbb;
    }
  }
}
</style>